import { useState, useRef, useEffect } from 'react'

function UseRef3 () {
  console.log('2 render App')
  const [count, setCount] = useState(0)

  // 创建一个 ref 对象，默认值就是 状态 count 的值
  const countRef = useRef(count)

  // 相当于监听 count 的变化，只要 count 变了
  // 就把 count 的最新值保存到 countRef.current 属性中
  // 这样，countRef.current 中保存的就是 count 的最新值了
  useEffect(() => {
    console.log('3 effect run')
    countRef.current = count
    console.log('4 change current')
  }, [count])

  // 展示 count 值
  const showCount = () => {
    setTimeout(() => {
      console.log('展示 count 值：', count)
      console.log('展示 count 最新值：', countRef.current)
    }, 3000)
  }

  // +1
  const onClick = () => {
    console.log('1 click')
    setCount(count + 1)
  }

  return (
    <div>
      <h1>计数器：{count}</h1>
      <button onClick={onClick}>+1</button>
      <button onClick={showCount}>点击按钮3秒后显示count</button>
    </div>
  )
}

export default UseRef3
